<!-- 云模型创建类型 -->

<template>
  <el-dialog v-model="visible" title="创建" width="30%">

    <!--云模型from -->
    <el-form ref="ruleFormRef" :model="form" label-position="top">
      <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>

      <el-form-item prop="name" label="姓名" :rules="[
        { required: true, message: '请输入姓名' },
      ]">
        <el-input v-model="form.name" autocomplete="off" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item prop="tag" label="标签" :rules="[
        { required: true, message: '请输入姓名' },
      ]">
        <el-select v-model="form.tag" placeholder="请选择标签">
          <el-option label="AI·云模型" value="1" />
          <el-option label="助手" value="2" />
          <el-option label="商务" value="2" />
          <el-option label="大健康" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.desc" type="textarea" placeholder="请输入备注" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="danger" @click="submitForm(ruleFormRef)">
          创建
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { inject, ref, reactive } from 'vue'
import { ElMessageBox } from 'element-plus'
import pubsub from 'pubsub-js'
const visible = inject("visible");
const ruleFormRef = ref()
const dialogVisible = ref(false)

// 云模型from
const form = reactive({
  imageUrl: '',
  name: '',
  tag: '',
  desc: '',
})

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      pubsub.publish('CLOUDMODELCREATE', form)
    } else {
      console.log('error submit!')

      return false
    }
  })
}


</script>
<style scoped>
.avatar-uploader {
  text-align: center;
  margin-bottom: 20px;
}



::v-deep .avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}



.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  text-align: center;
}
</style>
